<template>
	<view  class="shujia">
		<!-- 导航栏 -->
		<view class="shujia-nav">
			<view class="nav-title">我的书架</view>
			<view class="nav-item">
				<view><image src="/static/index/005.png" mode=""></image></view>
				<view>
					<view @click="change" v-if="hidden">编辑</view>
					<view :class="{active:show === true}" @click="change01" v-else>删除</view>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<view class="show" v-show="isShow">
			<view class="shu-show" >
				<text @click="quXiao">取消</text>
				<u-checkbox-group>
					<u-checkbox v-model="value" shape="circle" @change="checkboxChange" :disabled="flag">全部</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<!-- 卡片 -->
		<my-zuijin :shulist="shuList"></my-zuijin>
		<!-- 书本列表 -->
		<view class="list">
			<shulist :list="list" :isShow="isShow" :isText="true" @active="active" @flagle="flagle" @del="del" ref="shulist"></shulist>
		</view>
	</view>
</template>
<script lang="ts" setup>
</script>
<style scoped lang="scss">
.shujia{
	padding: 140rpx 35rpx 0 34rpx;
	font-family: Microsoft YaHei;
	.show{
		width: 710rpx;
		height: 68rpx;
		background: rgba(255, 255, 255, 0);
		box-sizing: border-box;
		.shu-show{
			// background-color: #18B566;
			display: flex;
			justify-content: flex-end;
			text{
				font-size: 26rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #939393;
				line-height: 90rpx;
				margin-right: 25rpx;
			}
		}
	}
	.shujia-nav{
		display: flex;
		justify-content: space-between;
		height: 158rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding: 78rpx 35rpx 0 34rpx;
		.nav-title{
			font-size: 46rpx;
			font-weight: bold;
			color: #2C2C2C;
		}
		.nav-item{
			display: flex;
			font-size: 30rpx;
			font-weight: bold;
			color: #000000;
			line-height: 50rpx;
			image{
				width: 38rpx;
				height: 38rpx;
				margin-right: 45rpx;
				margin-top: 5rpx;
			}
		}
	}
	
}
</style>
